<template>
  <div class="UserMemberList">
    <h3>学生成绩列表</h3>
    <div class="input_box">
      <span class="querySpans">查询条件：</span>
      <el-select
        filterable
        v-model="selectData.season"
        placeholder="考季"
        clearable
        size="small"
      >
        <el-option v-for="item in seasonList" :label="item.name" :key="item.id" :value="item.id"></el-option>
      </el-select>
      <el-select
        filterable
        v-model="selectData.classId"
        placeholder="班级"
        clearable
        size="small"
      >
        <el-option v-for="item in classList" :label="item.name" :key="item.id" :value="item.id"></el-option>
      </el-select>
      <el-input placeholder="学生名" v-model="selectData.studentName" size="small"></el-input>
      <el-button class="selectBtn" size="small" @click="getList(1,page_option.page_size)">查询</el-button>
      <el-button class="resetBtn" size="small" @click="reset()">重置</el-button>
      <el-button size="small" icon="el-icon-circle-plus" class="addAll" style="float: right" @click="addAdministrator">
        成绩添加
      </el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center" size="small">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.examUser" border size="small">
              <el-table-column prop="seasonName" label="考季"></el-table-column>
              <el-table-column prop="examinationName" label="考试名称"></el-table-column>
              <el-table-column prop="score" label="分数"></el-table-column>
              <el-table-column prop="examinationId" label="操作" min-width="100px">
                <template v-slot="subScope">
                  <el-button v-if="scope.row.isOperating===1" @click="handleResetPassword(scope.row,subScope.row)"
                             style="background-color:#008a96;color:#fff"
                             size="mini">
                    修改
                  </el-button>
                  <!--<el-button @click="handleDelete(scope.row)" style="background-color:#ea7c5a;color:#fff" size="mini">删除-->
                  <!--</el-button>-->
                </template>
              </el-table-column>
            </el-table>

          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="70"></el-table-column>
        <el-table-column prop="userName" label="学生姓名" min-width="160"></el-table-column>
        <el-table-column prop="className" label="班级" min-width="160"></el-table-column>
        <el-table-column prop="userNumber" label="学号" min-width="160"></el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      seasonList: [],
      classList: [],
      selectData: {
        classId: "",
        season: "",
        studentName: ""
      },
      tableData: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0
      }
    };
  },
  computed: {
    tableSize() {
      return this.$store.getters.tableSize;
    }
  },
  mounted() {
    this.getSeasonList();
    this.getClassList();
    this.getList(this.page_option.current_page, this.page_option.page_size);
  },
  components: {},
  methods: {
    //重置查询条件
    reset() {
      this.selectData = {
        classId: "",
        season: "",
        studentName: ""
      };
      this.page_option.current_page = 1;
      this.page_option.page_size = 15;
      this.getList(1, 15);
    },
    getSeasonList() {
      let data = {
        name: "",
        pageSize: 100,
        pageNum: this.page_option.current_page,
      };
      console.log(data, "请求参数");
      this.$api.education.getSeasonList(data)
        .then((res) => {
          if (res.code === 200) {
            let data = res.data;
            this.seasonList = data.list;
          }
        });
    },
    getClassList() {
      this.$api.education.classList({
        pageNum: 1,
        pageSize: 100
      }).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.classList = res.data.list;
        }
      });
    },
    getList(pageNum, pageSize) {
      let params = {
        season: "", //科目
        classId: "", // 班级
        studentName: "",  //学生名
        pageSize: pageSize,
        pageNum: pageNum
      };
      this.$api.studentInfo.getStudentExamList(params)
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
          this.page_option.total = res.data.total;
        });

    },
    handleSizeChange(size) {
      console.log(size);
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList(
        1,
        this.page_option.page_size
      );
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList(
        this.page_option.current_page,
        this.page_option.page_size
      );
    },
    // 更改开启状态
    SwitchChange(row) {
      this.$confirm("是否确认" + (row.lockState == true ? "锁定" : "取消锁定") + "该会员?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let option = this.option();
        option.userId = row.id;
        option.lockState = row.lockState == true ? "YES" : "NO";
        console.log(option);
        this.$store.dispatch("EditUserMember", option).then(res => {
          this.$message({
            type: "success",
            message: "修改成功！"
          });
        }).catch((err) => {
          row.lockState = !row.lockState;
          console.log(err);
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消修改"
        });
        row.lockState = !row.lockState;
      });
    },
    handleResetPassword(row, subRow) {
      console.log(row, subRow);
      this.$prompt("修改:" + subRow.examinationName, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "不能为空！",
        inputValue: String(subRow.score),
      }).then(({ value }) => {
        let params = {
          studentId: row.id,
          examination: subRow.examinationId,
          score: value
        };
        this.$api.studentInfo.modifyGrades(params)
          .then((res) => {
            this.$message.success("修改成功");
            this.getList(this.page_option.current_page, this.page_option.page_size);
          });
      }).catch(() => {
        this.$message.info("已取消!");
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm("是否确认删除此数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$api.education.examDelete({ id: row.id })
          .then((res) => {
            this.$message.success("删除成功");
          });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    //添加用户
    addAdministrator() {
      this.$router.push({ path: "/studentInfo/subjectScore/add" });
    },
    option() {
      return {
        userId: "", lockState: "", phone: ""
      };
    }
  }
};
</script>
<style scoped>
@import url('./list.css');
</style>
